<template>
  <div class="expire_container">
    <div class="header">
      <p>归还图书</p>
    </div>
    <div class="banner">
      <div class="expireDays">
        <p>还剩{{ expireInfo.expireDays }}天</p>
      </div>
      <el-input v-model="expireInfo.bookNumber" :readonly="true" class="input-style">
        <template #prepend>图书编号</template>
        <el-button slot="prepend" icon="el-icon-collection"></el-button>
      </el-input>
      <el-input v-model="expireInfo.closeDate" :readonly="true" class="input-style">
        <template #prepend>截止日期</template>
        <el-button slot="prepend" icon="el-icon-date"></el-button>
      </el-input>
      <el-input v-model="returnInfo.violationMessage" placeholder="若无违章信息，则无需填写" class="input-style" clearable>
        <template #prepend>违章信息</template>
        <el-button slot="prepend" icon="iconfont icon-weizhangchaxun"></el-button>
      </el-input>
      <el-input v-model="expireInfo.bookAdminId" :readonly="true" class="input-style">
        <template #prepend>人员编号</template>
        <el-button slot="prepend" icon="el-icon-s-custom"></el-button>
      </el-input>
      <el-date-picker v-model="returnInfo.returnDate" type="datetime" placeholder="选择归还日期时间"
                      default-time="12:00:00" value-format="yyyy-MM-dd HH:mm:ss" prefix-icon="el-icon-date" class="input-style" >
      </el-date-picker>
      <div class="return_button">
        <el-button type="warning" @click="returnBook" class="return-btn">归还</el-button>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      returnInfo: {
        returnDate: "",
        violationMessage: "",
        bookNumber: 0,
        violationAdminId: 0,
      },
      expireInfo: {
        expireDays: 47,
        bookNumber: 192,
        closeDate: "",
        bookAdminId: 0,
      },
    };
  },
  methods: {
    async getExpireInfo() {
      const bookNumber = this.$route.query.bookNumber;
      const { data: res } = await this.$http.get('bookadmin/query_expire/' + bookNumber);
      if (res.status !== 200) {
        return this.$message.error(res.msg);
      }
      this.$message.success({ message: res.msg, duration: 1000 });
      this.expireInfo = res.data;
      const id = window.sessionStorage.getItem('bookAdminId');
      this.expireInfo.bookAdminId = parseInt(id);
      this.returnInfo.bookNumber = this.expireInfo.bookNumber;
    },
    async returnBook() {
      if (this.returnInfo.returnDate === "") {
        this.$message.error({ message: "归还日期不能为空", duration: 1000 });
        return;
      }
      this.returnInfo.violationAdminId = parseInt(window.sessionStorage.getItem('bookAdminId'));
      const { data: res } = await this.$http.post('bookadmin/return_book', this.returnInfo);
      if (res.status !== 200) {
        return this.$message.error(res.msg);
      }
      this.$message.success({ message: res.msg, duration: 1000 });
      this.$router.push('/returnbook');
    },
  },
  created() {
    this.getExpireInfo();
  },
};
</script>


<style lang="less" scoped>
/* 全局容器 */
.expire_container {
  background: linear-gradient(135deg, #f3f4f9, #e2e7f1);
  height: 100vh; /* 保证容器至少填满屏幕 */
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  padding: 20px;
}

/* Header 样式 */
.header {
  text-align: center;
  padding: 15px;
  background-color: #3f8cfc;
  width: 90%;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  border-radius: 8px;
  margin-bottom: 20px;
  p {
    font-size: 32px;
    color: #fff;
    font-weight: bold;
  }
}

/* Banner 部分 */
.banner {
  width: 100%;
  max-width: 800px;
  padding: 30px;
  background-color: #fff;
  border-radius: 12px;
  box-shadow: 0 6px 15px rgba(0, 0, 0, 0.1);
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow: hidden;
}

.expireDays {
  margin-top: 20px;
  width: 100%;
  background-color: #f9fafc;
  padding: 15px;
  border-radius: 8px;
  text-align: center;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  p {
    font-size: 20px;
    color: #333;
    font-weight: 600;
  }
}

.input-style {
  width: 100%;
  max-width: 600px;
  border-radius: 8px;
  margin-top: 20px;
  padding: 10px;
  box-sizing: border-box;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* 输入框和按钮的样式 */
.el-button, .el-input {
  width: 100%;
  margin: 10px 0;
}

.el-input__inner {
  border-radius: 8px;
}

/* 禁止按钮悬浮效果 */
.el-button {
  border-radius: 8px;
  font-size: 16px;
  padding: 12px;
  transition: none;
}

.el-button:hover {
  background-color: #00b894;
  color: #fff;
}

.el-date-picker {
  width: 100%;
  margin-top: 20px;
  .el-input__inner {
    border-radius: 8px;
  }
}

/* 归还按钮 */
.return_button {
  margin-top: 30px;
  display: flex;
  justify-content: center;
  width: 100%;
}

.return-btn {
  background-color: #ff9f00;
  color: white;
  font-size: 18px;
  padding: 12px 30px;
  border-radius: 30px;
  transition: background-color 0.3s;
  width: 200px;
  text-align: center;
  cursor: pointer;
}

.return-btn:hover {
  background-color: #e88a00;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); /* 给按钮增加阴影效果 */
}
</style>
